<template>
	<view ref="progress">
		<view>
			<view style="display: flex">
				<view>
					<view class="upVerticalLineNone"></view>
					<view class="hollowCircle"></view>
					<view class="downVerticalLine"></view>
				</view>
				<view class="udCenter">{{startRegion}}</view>
			</view>
		</view>
		<view>
			<view style="display: flex">
				<view>
					<view class="upVerticalLine"></view>
					<view class="hollowCircle"></view>
					<view class="downVerticalLineNone"></view>
				</view>
				<view class="udCenter">{{endRegion}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Progress",
		props: {
			startRegion: String,
			endRegion: String
		},
		data() {
			return {}
		},
		mounted() {}
	}
</script>

<style scoped>
	.udCenter {
		margin-left: 5px;
		display: flex;
		align-items: center;
	}

	.upVerticalLine {
		margin-bottom: 3px;
		height: 5px;
		width: 2px;
		background-color: #eee;
		margin-left: 3px;
	}

	.upVerticalLineNone {
		margin-bottom: 3px;
		height: 5px;
		width: 2px;
		margin-left: 3px;
	}

	.downVerticalLine {
		margin-top: 3px;
		height: 10px;
		width: 2px;
		background-color: #eee;
		margin-left: 3px;
	}

	.downVerticalLineNone {
		margin-top: 3px;
		height: 5px;
		width: 2px;
		margin-left: 3px;
	}

	.hollowCircle {
		height: 8px;
		width: 8px;
		background-color: #ccc;
		border-radius: 100%
	}
</style>
